<template>
  <section class="UserList-container">
    <el-table :data="users" style="width: 100%" size="medium">
      <el-table-column width="100">
        <template slot="header">
          <slot name="action-bar">
            <i class="iconfont icon-icon_xinzeng" />
          </slot>
        </template>
        <template slot-scope="scope">
          <slot name="row-action-bar" :row="scope.row"></slot>
        </template>
      </el-table-column>
      <el-table-column type="index" width="40px" align="center" />
      <el-table-column prop="name" label="真实姓名" width="200">
        <template slot-scope="scope">
          <div class="name-panel">
            <div class="icon">
              <el-avatar
                size="large"
                src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
              ></el-avatar>
            </div>
            <div class="content">
              <h1 class="title">{{ scope.row.name }}</h1>
              <p class="tag">
                <span class="name-admin">
                  <el-tag
                    v-if="scope.row.is_admin == 'True'"
                    type="success"
                    size="mini"
                    >超管用户</el-tag
                  >
                  <el-tag v-else type="info" size="mini">普通用户</el-tag>
                </span>

                <!-- <span class="name-admin">
                  <el-tag
                    v-if="scope.row.is_authorize == 'True'"
                    type="success"
                    size="mini"
                    >可授权</el-tag
                  >
                  <el-tag v-else type="info" size="mini">不可授权</el-tag>
                </span> -->

                <span class="name-terminal" v-if="scope.row.terminal_name">
                  <el-tag type="primary" size="mini">{{
                    scope.row.terminal_name
                  }}</el-tag>
                </span>
              </p>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="username" label="用户名" width="120">
      </el-table-column>
      <el-table-column prop="employee_name" label="员工" width="120">
      </el-table-column>
      <el-table-column prop="telephone" label="电话" width="150" />
      <el-table-column prop="remark" label="备注" />
      <el-table-column label="创建信息" width="180">
        <template slot-scope="scope">
          <p>
            {{ scope.row.creator_name != "" ? scope.row.creator_name : "" }}
          </p>
          <p>{{ scope.row.create_date }}</p>
        </template>
      </el-table-column>
      <!-- <el-table-column label="是否禁用" width="180">
        <template slot-scope="scope">
          {{ scope.row.deleted }}
          <el-switch
            v-model="scope.row.deleted"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch>
        </template>
      </el-table-column> -->
      <el-table-column label="修改信息" width="180">
        <template slot-scope="scope">
          <p>
            {{ scope.row.editor_name != "" ? scope.row.editor_name : "" }}
          </p>
          <p>{{ scope.row.edit_date }}</p>
        </template>
      </el-table-column>
    </el-table>
  </section>
</template>

<script>
export default {
  props: ["users"],
  data() {
    return {
      loading: false,
    };
  },
  methods: {},
  mounted() {},
};
</script>

<style scoped lang="scss">
.UserList-container {
  .name-panel {
    display: flex;
    flex-direction: row;
    align-items: center;
    overflow: auto;

    .icon {
      background: white;
      padding: 2px;
      margin-left: 2px;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      box-shadow: 0 0 0.2rem #999;
      overflow: hidden;
    }

    .content {
      margin-left: 10px;

      .title {
        font-size: 2rem;
        margin-bottom: 5px;
        font-weight: bold;
      }

      .tag {
      }

      .name-admin {
        margin-right: 5px;
      }
    }
  }
}
</style>
